Skip to main content

🗂️ Other

7. Other​

The Other category includes specially designed components that offer unique functionalities and customization options. These components are tailored for specific use cases and provide advanced features to enhance your application's capabilities.

Available Components:

  • Card
  • Carousel
  • Web Embedded
tip

Each component is fully customizable, allowing you to drag and drop, resize, and tailor them to fit your app's specific needs. Additionally, every component supports adding actions, setting styles for specific screen sizes, and extensive customization to enhance functionality and design.

info

The settings available in the left and right toolbar may vary depending on the selected component.

1. Card​

  1. Add the Card:
    • Drag and drop the Card component onto the Canvas.
  2. Position and Resize:
    • Place the card in the desired location and adjust its size using percentage values or by dragging its edges.
  3. Customize the Card:
    • Left Toolbar:
      • Element Tree: Click on the entire card to view and interact with its nested elements.
      • Double-Click Elements: Double-click on individual elements within the card to customize them as described in their respective sections.
    • Right Toolbar:
      • Access comprehensive customization options for the card, including color, border style, shadow, and more.
  1. Add the Carousel:
    • Drag and drop the Carousel component onto the Canvas.
  2. Position and Resize:
    • Place the carousel in the desired location and adjust its size accordingly.
  3. Customize the Carousel:
    • Left Toolbar:
      • Effect Selection: Choose the transition effect for image appearance.
      • Pagination Settings: Define how images will change (e.g., dots, numbers).
      • Show Arrows: Enable or disable navigation arrows.
      • Autoplay: Set the carousel to autoplay slides.
      • Loop Slides: Enable looping of slides.
      • Add Image Links: Insert URLs for the images to be displayed.
      • Add Action: Click on "Add Action" to define interactions.
      • Set Styles for Specific Screen Sizes: Customize the carousel’s appearance for different devices.
    • Right Toolbar:
      • Utilize comprehensive customization options, including color, border style, shadow, and more.

3. Web Embedded​

  1. Add the Web Embedded:
    • Drag and drop the Web Embedded component onto the Canvas.
  2. Position and Resize:
    • Place the web embedded component in the desired location and adjust its size accordingly.
  3. Customize the Web Embedded:
    • Left Toolbar:
      • Add Website Link: Paste the URL of the website you want to embed within your app.
      • Add Action: Click on "Add Action" to define interactions.
      • Set Styles for Specific Screen Sizes: Customize the embedded website’s appearance for different devices.
    • Right Toolbar:
      • Utilize comprehensive customization options, including color, border style, shadow, and more.

4. Google maps​

Setting Up Your Google Developer Console

  1. Create a Project:

    • Go to the Google Developers Console.
    • Log in and provide any required billing details.
    • Create a new project and name it appropriately.

  2. Enable APIs:

    • With your project selected, go to APIs & Services > Library.
    • Search for and enable the following APIs:
      • Geocoding API
      • Places API
      • Geolocation API
      • Maps JavaScript API
      • Time Zone API
      • You can enable additional setting if you wish

  3. Generate API Keys:

  • Go to APIs & Services > Keys & Credentials.
  • Click Create Credentials and select API Key.
  • Create one API key and name
  • Copy generated API key
  1. Adding a Map Element:
  • Drag and drop the Map element from the elements panel into your app's interface.
  • Input API key in the Google Maps API key section.
  • Configure the element’s properties, such as initial location, zoom level, and markers.
  • Click “Enable default UI” toggle to see all additional UI element.
  • Keep in mind that UI elements depend on the size of the component. If the size is not big enough not all elements will be displayed.
tip
  • Google Billing: Ensure your Google project is linked to a billing account to avoid service interruptions.
  • API Propagation: Changes in API key settings may take a few minutes to propagate.
  • Accuracy: For non-US addresses, adding a Map element can improve the accuracy of location data.

Need Assistance?​

If you encounter any challenges or require further guidance while building your app, please refer to the Documentation or, contact our support team at [email protected].

Happy Building with AppStruct!